<template>
    <div>
        <div class="outer">
            <el-page-header @back="goBack" content="学生信息输入"></el-page-header>
            <div class="enter">
                <h1>学生信息输入</h1>
                <label>
                    <p>学号</p>
                    <el-input placeholder="请输入学号" v-model="stu_id" clearable></el-input>
                </label>
                <label>
                    <p>姓名</p>
                    <el-input placeholder="请输入姓名" v-model="stu_name" clearable></el-input>
                </label>
                <label class="radio">
                    <p>性别</p>
                    <div class="right">
                        <el-radio v-model="stu_sex" label="男">男</el-radio>
                        <el-radio v-model="stu_sex" label="女">女</el-radio>
                    </div>
                </label>
                <!-- -------------------------------------------------------------------------------------------------- -->
                <label class="JGbox">
                    <p>籍贯 </p>
                    <el-cascader v-model="value" :options="options" :props="{
                        label: 'name',
                        value: 'name',
                    }" @change="handleChange"></el-cascader>
                </label>
                <!-- -------------------------------------------------------------------------------------------------- -->
                <label class="goOut">
                    <p>出生日期</p>
                    <div class="block">
                        <span class="demonstration"></span>
                        <el-date-picker v-model="stu_date" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </label>
                <!-- -------------------------------------------------------------------------------------------------- -->
                <label>
                    <p>爱好 </p>
                    <el-input placeholder="请输入爱好" v-model="stu_hobby" clearable>
                    </el-input>
                </label>
                <label class="gbl">
                    <p>男或女朋友</p>
                    <div class="right">
                        <el-radio v-model="stu_gbf" label="是">是</el-radio>
                        <el-radio v-model="stu_gbf" label="否">否</el-radio>
                    </div>
                </label>
                <label>
                    <p>头像</p>
                    <div class="right">
                        <input type="file" name="" id="" @change="getImg" ref="stu_img">
                    </div>
                    <div class="imgbox">
                        <img :src="stu_head_img" alt="" v-show="stu_head_img">
                    </div>
                </label>
                <button @click="push_info">上传信息</button>
                <button @click="goCamera">跳转拍照</button>
            </div>
        </div>
    </div>
</template>

<script>

import {
    PageHeader,
    Input,
    Radio,
    DatePicker,
    Cascader,
    Message
} from 'element-ui'

import request from "../../api/request.js"
export default {
    data() {
        return {
            stu_id: "",
            stu_name: "",
            stu_sex: "男",
            stu_jg: "",
            stu_date: "",
            stu_hobby: "",
            stu_gbf: "是",
            stu_head_img: "",
            area: [],
            nodes: {},
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
            imageUrl: '',
            // 
            value: [],
            options: [],


            // 
        }
    },
    components: {
        "el-page-header": PageHeader,
        "el-input": Input,
        "el-radio": Radio,
        "el-date-picker": DatePicker,
        "el-cascader": Cascader,
    },
    methods: {
        goCamera() {
            this.$router.push("/CameraUpload")
        },
        goBack() {
            // console.log('go back');
            this.$router.back()
        },
        async push_info() {
            const stu_info = {
                stu_id: this.stu_id,
                stu_name: this.stu_name,
                stu_sex: this.stu_sex,
                stu_jg: this.stu_jg,
                stu_date: this.stu_date,
                stu_hobby: this.stu_hobby,
                stu_gbf: this.stu_gbf,
                stu_head_img: this.stu_head_img,
            }
            const resullt = await request("post", `/student_info`, stu_info, "form")
            console.log(stu_info)
            console.log(resullt)
            Message({
                message: "数据提交成功！！",
                type: "success",
                offset: 130,
            })
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleChange(value) {
            console.log(value);
            this.stu_jg = value.join("-");
        },
        getArea() {

        },
        getImg() {
            let that = this
            console.log(this.$refs.stu_img.files[0])
            let f = this.$refs.stu_img.files[0]
            let fr = new FileReader()
            fr.readAsDataURL(f)
            fr.onloadend = function () {
                that.stu_head_img = fr.result
                //这是一个异步操作，现在是读取不到的，但是可以在传输的时候传出去
            }
        }
    },
    async mounted() {
        const areaData = await request("get", "/area", 0, "");
        console.log(areaData.data)
        this.options = areaData.data
    },

}
</script>

<style lang="scss" scoped>
.outer {
    box-sizing: border-box;
    padding: 20px;
    font-size: 20px;
    height: 100%;

    .el-radio {
        height: 20px;
        margin: 0;
        display: flex;
        justify-content: center;
        width: 550px;
        font-size: 25px;
    }

    .goOut,
    .JGbox {
        display: flex;
        justify-content: space-between;
    }

    .block {
        display: flex;
        justify-content: left;
        width: 550px;
    }

    .gbl {
        width: 550px;

        >p {
            width: 250px;
        }
    }

    p {
        width: 150px;
        text-align: left;
    }

    label {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30px 0;
        width: 550px;
        justify-content: space-between;

        .right {
            width: 400px;
            display: flex;
            justify-content: space-between;
        }
    }

    h1 {
        font-size: 30px;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .title {
        font-size: larger;
    }

    .el-page-header /deep/ .el-page-header__title {
        font-size: 18px;
    }

    .enter {
        width: 550px;
        margin: 0 auto;

        button {
            margin: 80px auto;
            display: block;
            width: 180px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            background-color: #1A73E8;
            color: antiquewhite;
            border: 0;
            border-radius: 10px;
        }
    }
}

.el-icon-plus {
    border: 3px #409EFF solid;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;

}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.imgbox {
    width: 200px;
    height: 200px;
    border: 4px solid rgb(60, 60, 255);

    img {
        width: 100%;
        height: 100%;
    }
}
</style>